<template>
  <DialogVue :dialogVisible="dialogVisible" @closeModal="closeModal">
    <div class="dialog-header">
      <h3>密码设置</h3>
      <p>设置密码，账号更安全;</p>
      <p>为保证账号安全，设置密码需进行二次验证</p>
    </div>
    <!-- <div class="phone">使用手机号：{{ userStore.userInfo.mobile }}</div> -->
    <!-- <div>
      <input type="number" v-model="msgCode" />
      <button @click="sendCode">发送验证码</button>
    </div> -->
    <div class="dialog-content">
      <input type="text" placeholder="输入密码" v-model="password" />
      <input type="text" placeholder="再次输入密码" v-model="repassword" />
    </div>
    <template #footer>
      <!-- <el-button class="btn btn1" @click="checkCode">验证</el-button> -->
      <div class="dialog-footer">
        <el-button class="btn cancle" @click="closeModal">取消</el-button>
        <el-button class="btn submit" @click="submit">确认修改</el-button>
      </div>
    </template>
  </DialogVue>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 弹出框
import DialogVue from "@components/dialog/index.vue";
// store
import { useGlobalStore } from "@stores";
const userStore = useGlobalStore().userStore;
// api
import {
  sendCheckCode,
  modifyPasswordVerification,
  modifyPassword,
} from "@api/user";

const msgCode = ref("");
// 发送验证码
const sendCode = async () => {
  const res = await sendCheckCode();
  if (res.code != 0) return;
  ElNotification({
    showClose: true,
    message: res.errorMessage,
    type: "success",
  });
};
// 验证
const checkCode = async () => {
  const res = await modifyPasswordVerification(msgCode.value);
  if (res.code != 0) return;
  ElNotification({
    showClose: true,
    message: res.errorMessage,
    type: "success",
  });
};
// 提交密码
const password = ref("");
const repassword = ref("");
const submit = async () => {
  if (password.value != repassword.value) return;
  const res = await modifyPassword(password.value, repassword.value);
  if (res.code != 0) return;
  ElNotification({
    showClose: true,
    message: res.errorMessage,
    type: "success",
  });
};
// 关闭弹窗
const emits = defineEmits(["closeDialog"]);
const dialogVisible = ref(true);
const closeModal = () => {
  dialogVisible.value = false;
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
.dialog-header {
  text-align: center;
  h3,
  p {
    margin: 0;
  }
  h3 {
    font-size: 19px;
    font-weight: 400;
    color: #232323;
    margin-bottom: 19px;
  }
  p {
    font-size: 11px;
    color: #6b6b6b;
    line-height: 22px;
  }
}
.dialog-content {
  margin-top: 35px;
  padding: 0 34px;
  display: flex;
  flex-direction: column;
  input {
    height: 39px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 17px;
    font-size: 11px;
    color: #232323;
    padding: 0 11px;
    outline: none;
  }
}
.dialog-footer {
  margin-top: 35px;
  padding: 0 34px;
  display: flex;
  .btn {
    flex: 1;
    height: 39px;
    border-radius: 8px 8px 8px 8px;
    font-size: 17px;
  }
  .cancle {
    color: #232323;
    background: #c7c7c7;
  }
  .submit {
    background: #c90000;
    color: #ffffff;
  }
}
</style>
